<template>
    <div class="wrapper">
        <div class="content">
            <slot></slot>
        </div>
        <div class="actionAdd" v-show="dataList.length<max">
            <slot name="actionAdd">
                <span @click="add" class="addClick">
                    <el-icon><CirclePlus /></el-icon>
                    <span> {{ addText }} </span>
                </span>
            </slot>
        </div>
        <div v-for="(item,index) in dataList" :key="item.uid" class="item">
            <div class="item-cls">
                <slot name="item" :item="item" :index="index"></slot>
                <div class="actionDel" v-show="dataList.length>min">
                    <slot name="actionDel" :item="item" >
                        <span @click="del(item)" class="delClick">
                            <el-icon><Delete /></el-icon>
                            <span> {{ delText }} </span>
                        </span>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getData } from '@/api/system/dict/data';
import { deepCopy, } from '@/utils';
import { CirclePlus, Delete } from '@element-plus/icons-vue'

// 获取size位随机数
const getRandomNumber = (size=5)=>Math.floor(Math.random()*Math.pow(10,size));

export default {
    props: {
        min: {
            type: Number,
            default: 1,
        },
        max: {
            type: Number,
            default: Infinity,
        },
        template: {
            type: Object,
            default: ()=>({ val: '' })
        },
        addText: {
            type: String,
            default: '新增'
        },
        delText: {
            type: String,
            default: '删除'
        },
        value: { // 双向绑定
            type: Array,
            default: ()=>[],
        }
    },
    data(){
        return {
            dataList: [],
        }
    },
    watch: {
        value: {
            handler(newList){
                if(newList.length&&newList.every(el=>!el.uid)){
                    // 每一个项目都不存在uid则证明 并非生成的数据，而是后端传输的数据
                    this.dataList = deepCopy(newList).map(el=>({ uid: this.getSimpleUID(), ...el, }));
                    return this.emitChangeVal();
                }
                
                if(newList.length==0){
                    this.dataList = new Array(this.min).fill(1).map(el=>this.generateObj());
                    return this.emitChangeVal();
                }
            },
            immediate: true,
        }
    },
    methods: {
        getDataList(){
            return deepCopy(this.dataList);
        },
        emitChangeVal(){
            this.$emit('change', this.dataList);
        },
        getSimpleUID(){
            return `${Date.now()}-${getRandomNumber()}`;
        },
        generateObj(){
            const resultObj =  deepCopy(this.template);
            resultObj.uid = this.getSimpleUID();
            return resultObj;
        },
        add(){
            if(this.dataList.length>=this.max){
                return;
            }
            this.dataList.push(this.generateObj());
            this.emitChangeVal();
        },
        del(item){
            if(this.dataList.length<=this.min){
                return;
            }
            const delIndex = this.dataList.findIndex(el=>el.uid==item.uid);
            if(delIndex!=-1){
                this.dataList.splice(delIndex,1);
                this.emitChangeVal();
            }
        },
        reset(){
            this.dataList = new Array(this.min).fill(1).map(el=>this.generateObj());
            return this.emitChangeVal();
        },
    },
    
}
</script>

<style lang="scss" scoped>
.addClick, .delClick{
    cursor: pointer;
    display: flex;
    align-items: center;
}

.actionDel, .item-cls{
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actionAdd{
    display: flex;
    justify-content: flex-end;
}
</style>